<template>
  <div class="sun-Light">
    <div class="time-box">
      <time-line v-if="showTimeLine" :timeData="timeData" :nameData="timeData" :interval="2" @changeTime="changeTime" @stopTime="stopTime" @close="close"></time-line>
    </div>
  </div>
</template>

<script>
import timeLine from '@/components/toolBar/sunLight/timeLine.vue';
export default {
  components: { timeLine },

  data() {
    return {
      timeData: [],
      showTimeLine: false,
      brightness: 0.2
    };
  },

  methods: {
    createdTime() {
      this.getTime();
      this.showTimeLine = true;
    },

    getTime() {
      let timeData = [];
      for (let i = 0; i <= 24; i++) {
        const hr = i < 10 ? `0${i}` : i;
        timeData.push(`${hr}:00:00`);
      }
      this.timeData = timeData;
    },

    changeTime(type, curTime, timeIndex) {
      const state = new Date(`${curTime} ${type != 'change' ? timeIndex : '00'}:00:00`);
      const end = new Date(`${curTime} ${type != 'change' ? timeIndex : '24'}:00:00`);
      const startTime = Cesium.JulianDate.fromDate(state);
      const currentTime = Cesium.JulianDate.fromDate(new Date(`${curTime} ${timeIndex}:00:00`));
      const stopTime = Cesium.JulianDate.fromDate(end);
      let clock = this.viewer.clock;
      clock.startTime = startTime;
      clock.currentTime = currentTime;
      clock.stopTime = stopTime;
      clock.clockRange = Cesium.ClockRange.CLAMPED;
      clock.multiplier = 1000;
      clock.shouldAnimate = true;
      this.viewer.shadows = true;

      const brightnessContrast = [
        { time: 0, brightness: 0.1 },
        { time: 1, brightness: 0.15 },
        { time: 2, brightness: 0.2 },
        { time: 3, brightness: 0.3 },
        { time: 4, brightness: 0.4 },
        { time: 5, brightness: 0.5 },
        { time: 6, brightness: 0.6 },
        { time: 7, brightness: 0.65 },
        { time: 8, brightness: 0.7 },
        { time: 9, brightness: 0.75 },
        { time: 10, brightness: 0.8 },
        { time: 11, brightness: 0.9 },
        { time: 12, brightness: 1 },
        { time: 13, brightness: 0.9 },
        { time: 14, brightness: 0.85 },
        { time: 15, brightness: 0.8 },
        { time: 16, brightness: 0.75 },
        { time: 17, brightness: 0.7 },
        { time: 18, brightness: 0.6 },
        { time: 19, brightness: 0.5 },
        { time: 20, brightness: 0.3 },
        { time: 21, brightness: 0.2 },
        { time: 22, brightness: 0.15 },
        { time: 23, brightness: 0.1 },
        { time: 24, brightness: 0.05 },
      ];
      let brightness = brightnessContrast.find(e => e.time == timeIndex).brightness;;
      const stages = this.viewer.scene.postProcessStages;
      this.viewer.scene.brightness = this.viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
      this.viewer.scene.brightness.enabled = true;
      this.viewer.scene.brightness.uniforms.brightness = Number(brightness);
    },

    stopTime() {
      this.viewer.clock.multiplier = 1;
      this.viewer.clock.shouldAnimate = false;
    },

    close() {
      this.$emit('close');
    }
  },

  created() {
    this.viewer = this.Global.viewer;
    this.createdTime();
  },

  mounted() {

  },

  beforeDestroy() {
    this.viewer.clock.multiplier = 1;
    this.viewer.clock.shouldAnimate = true;
    this.viewer.shadows = false;
    this.viewer.scene.brightness.uniforms.brightness = 1;
    this.viewer.scene.brightness.enabled = false;

    let clock = this.viewer.clock;
    const time = Cesium.JulianDate.fromDate(new Date(`2023/10/12 00:00:00`));
    clock.startTime = time;
    clock.currentTime = time;
    clock.stopTime = time;
    clock.clockRange = Cesium.ClockRange.UNBOUNDED;
  }
}
</script>

<style lang="less" scoped>
.time-box {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-30%);
  width: 800px;
  height: 75px;
  z-index: 99999;
}
</style>